{extend name="public/base"/} {block name="body"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<header class="mui-bar mui-bar-nav" style="z-index:7">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">积分兑换中心</h1>
</header>
<div class="mui-content">

  <h5 style="background-color:#fff;padding:10px 0;" class="mui-text-center"> 可用积分<span style="color: #6ac20b;">{$Think.session.user.integral}</span></h5>
  <div style="background-color:#fff;padding:10px;">积分获得方式:购买商品可以获得积分（1元一积分） 登录商城可以获得积分（每天可以获得一次）评价商品可以获得积分   抽奖可以获得积分</div>
  <div style="padding: 10px 10px;">
    <div id="segmentedControl" class="mui-segmented-control">
      <a class="mui-control-item2 mui-active" href="{:url('index/coupon/integral')}">
        积分兑换
      </a>
      <a class="mui-control-item2" href="{:url('index/coupon/integralHistory')}" >
        积分记录
      </a>
      <a class="mui-control-item2" href="{:url('index/coupon/exchangeHistory')}">
        兑换历史
      </a>
    </div>
  </div>
  <div>
    <div id="item1" class="mui-control-content mui-active">
      <div id="scroll" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell">
              <div class="column" >
                  <div class="column-content">
                      <p class="img"><i class="sale5 small">5元</i></p>
                      <div class="info " style="padding-top:10px;">
                          <p class="large">5元代金券</p>
                          <p class="jf small" style="font-size:12px;color:#f7c91a">500积分</p>
                          <p class="jg small" style="font-size:12px;">代金券兑换</span></p>
                          <button type="button" class="mui-btn mui-btn-royal"  data-integral="500" data-total="50" data-coupon="5">兑换</button>
                      </div>
                  </div>
              </div>
            </li>
            <li class="mui-table-view-cell">
              <div class="column">
                  <div class="column-content">
                      <p class="img"><i class="sale10 small">10元</i></p>
                      <div class="info " style="padding-top:10px;">
                          <p class="large">10元代金券</p>
                          <p class="jf small" style="font-size:12px;color:#f7c91a">1000积分</p>
                          <p class="jg small" style="font-size:12px;">代金券兑换</span></p>
                          <button type="button" class="mui-btn mui-btn-royal" data-integral="1000" data-total="100" data-coupon="10">兑换</button>
                      </div>

                  </div>
              </div>
            </li>
            <li class="mui-table-view-cell">
              <div class="column">
                  <div class="column-content">
                      <p class="img"><i class="sale20 small">20元</i></p>
                      <div class="info " style="padding-top:10px;">
                          <p class="large">20元代金券</p>
                          <p class="jf small" style="font-size:12px;color:#f7c91a">1980积分</p>
                          <p class="jg small" style="font-size:12px;">代金券兑换</span></p>
                          <button type="button" class="mui-btn mui-btn-royal" data-integral="1980" data-total="200" data-coupon="20">兑换</button>
                      </div>

                  </div>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>
    <div id="item2" class="mui-control-content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          登录+5积分
        </li>
      </ul>
    </div>
    <div id="item3" class="mui-control-content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          第三个选项卡子项-1
        </li>
        <li class="mui-table-view-cell">
          第三个选项卡子项-2
        </li>
        <li class="mui-table-view-cell">
          第三个选项卡子项-3
        </li>
      </ul>
    </div>
  </div>
</div>


{/block}
{block name="script"}
  <script type="text/javascript">





    $(function(){
    $('#scroll').height($(window).height()-44)

    $('.mui-btn-royal').on('click', function(){
      var $this = $(this),total = $this.attr('data-total'),integral = $this.attr('data-integral'),coupon = $this.attr('data-coupon'),keyong=  parseInt("{$Think.session.user.integral}")

      if(keyong<integral){
        mui.toast('亲,你的积分还未达到'+integral+'积分')
        return ;
      }
      var btnArray = ['否', '是'];
      mui.confirm('您确定要兑换优惠券吗？', '兑换优惠券', btnArray, function(e) {
        if (e.index == 1) {
            $.post("{:url('index/coupon/exchange')}", {
                "integral": integral,
                "total": total,
                "coupon": coupon
            }, function(data) {
                mui.toast('兑换成功！')
                setTimeout(function() {
                  mui.back()
                }, 2000);
            }, "json");

        } else {
          return ;
        }
      })


    })
    })
  </script>
  <style>
  /* 使用代金券 */
  #cart_voucher { margin-bottom: -50px; }
  .my-coupons-mask { position: fixed; top: 0; left: 0; display: none;  width: 100%; height: 100%; background: #FFF; z-index: 9998;}
  .my-coupons-wrap { display: none;  width: 100%;  height: 100%;  padding-top: 8px;  overflow-y: scroll;  background: #f1f1f1; z-index: 9999; }
  .my-coupons-top { width: 100%; height: auto; }
  .my-coupons-top h1 { padding:  0 8px; font-size: 1.2em; font-weight: normal; color: #57b174; line-height: 2; }
  .my-coupons-top div.my-coupons-top-table-wrap { margin-top:1%; margin-bottom: 0.5%;  padding: 2% 8px; background: #FFF; }
  .my-coupons-top div.my-coupons-top-table-wrap table { width: 100%; }
  .my-coupons-top div.my-coupons-top-table-wrap table input { width: 80%; border-width:  0; font-size: 16px; }
  .my-coupons-top div.my-coupons-top-table-wrap table tr td.secord-child { width: 60px;  min-width: 60px; max-width: 60px; }
  .my-coupons-top div.my-coupons-top-table-wrap table a { display: block; float: right; margin-right: 8px; width: 20%;    min-width: 55px; text-align: center; line-height: 32px; border-radius: 40px; color: #FFF;  background: #32b16c; font-size: 1em; }
  .my-coupons-top div.my-coupons-top-table-wrap table a:hover,.my-coupons-top div table a:active,.my-coupons-top div table a:visited { color: #FFF; }

  .my-coupons { padding: 0 8px; }
  .my-coupons-header ul { width: 100%; padding-bottom: 5px;  border-bottom: solid 1px #57b174; overflow: hidden;  }
  .my-coupons-header ul li { float: left; width: 49%; text-align: center; color: #474747; }
  .my-coupons-header ul li.current { color: #57b174; }
  .my-coupons-header ul li.border { border-right: solid 1px #57b174; }

  .my-coupons-main { padding-bottom: 10px; }
  .my-coupons-main ul { padding-top: 3px; margin-bottom: 6px; }
  .my-coupons-main ul li { background: #FFF; border: solid 1px #CCC;  }
  .my-coupons-main ul li.current {  border: solid 1px #57b174; }
  .my-coupons-main ul li { position: relative; padding:0;  margin-top: 8px;   overflow: hidden;}
  .my-coupons-main ul li h1 { padding-top: 5px; margin-bottom: 3px; font-size: 0.875em; font-weight: normal; color: #343434;}
  .my-coupons-main ul li div.loading-box{ width: 25%; float: left; }
  .my-coupons-main ul li div.voucher-img { position: relative; }
  .my-coupons-main ul li img{ width: 100%;}
  .my-coupons-main ul li p { margin: 0; font-size: 0.75em; text-align: left; line-height: 1.5; color: #9b9b9b;  }
  .my-coupons-main ul li p.date em { float:right; display: none; margin-right: 5%; width: 11px; height: 11px; border-radius: 100%; background: #57b174; }
  .my-coupons-main ul li.current p.date em { display: block; font-style: normal; }
  .my-coupons-main ul li a { display: block;  padding: 8px;   overflow:  hidden; }
  .my-coupons-main ul li a.cancel-border { padding-left: 8spx; border: none; }
  .my-coupons-main ul li div.user-voucher-info { float: right; width: 70%; }

  .my-coupons-main ul li span.tips { position: absolute; right: 8px; top: 10px; padding: 3px 5px; font-size: 0.625em; color: #e90e0e;background: #57b174; color: #FFF; }
  .my-coupons-main ul li span.new { position: absolute; right: -10px; top: 0px; padding: 3px 5px; font-size: 0.625em; color: #ff3ec2;background: #ff3ec2; color: #FFF; }

  .my-coupons-gift-main {  display: none; width: 100%; padding-bottom: 50px; }
  .my-coupons-gift-main dl { width: 80%; margin: 25px auto; }
  .my-coupons-gift-main dl dt { padding-bottom: 0px;  border-bottom: solid 1px #cac9c9; }
  .my-coupons-gift-main dl dt input { display: block; width: 100%; margin: 0 auto; border-width: 0;  text-align: center; font-weight: normal; color: #a5a5a5; font-size: 1.1em; line-height: 25px; }
  .my-coupons-gift-main dl dd.code-tips {  text-align: center; font-size: 0.875em; margin-bottom: 20px;  margin-top: 6px; color: #aaa;}
  .my-coupons-gift-main a { display: block; width: 80%;  height: 40px; line-height: 40px; margin: 0 auto; text-align:  center;   background: #57b174; border-radius: 30px; color: #FFF; }

  .my-coupons-footer {  position: fixed; bottom: 0; left: 0; display: none; width: 100%; height: 50px; background: #fcfaec; z-index: 9999;}
  .my-coupons-footer img { display: block; height: 40px; margin: 5px auto; }
  .cart_voucher_item_inner { padding: 8px; overflow: hidden;}

  .column-content{ overflow:hidden; padding:10px;}
  .column-content .img{ width:20%; float:left;}
  .column-content .img img{ width:100%;}
  .column-content .img i{ font-style:normal; color:#FFF; width:100%; height:100%; display:block; line-height:500%; text-align:center}
  .column-content .img i.sale5{ background:#04c7bf}
  .column-content .img i.sale10{ background:#ffa619}
  .column-content .img i.sale20{ background:#ff7878}
  .column-content .img i.sale50{ background:#7bb954}
  .column-content .info{ overflow:hidden; float:left; width:75%; margin-left:5%;    position: relative;}
  .column-content .info p{ line-height:150%; vertical-align:middle}
  .column-content .info .title{ color:#555}
  .column-content .info .jg{ color:#999}
  .column-content .info .fen{ color:#57b174}
  .column-content .info .number{ color:#F00; text-align:right}
  .column-content .info .set{ color:#999; text-align:right; line-height:150%; vertical-align:middle; margin-top:10px;}
  .column-content .info .set span{ color:#F00}
.mui-btn-royal{
  position: absolute;
  bottom: 0;
  width: 60px;
  font-size: 12px;
  right: 0;
}


.mui-segmented-control .mui-control-item2 {
    line-height: 38px;
    display: table-cell;
    overflow: hidden;
    width: 1%;
    -webkit-transition: background-color .1s linear;
    transition: background-color .1s linear;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #007aff;
    border-color: #007aff;
    border-left: 1px solid #007aff;
}


.mui-segmented-control .mui-control-item2:first-child {
    border-left-width: 0
}

.mui-segmented-control .mui-control-item2.mui-active {
    color: #fff;
    background-color: #007aff
}
  </style>
{/block}
